<template>
  <div class="container m-b-10">
    <el-amap
      :key="key"
      class="amap-box"
      :amap-manager="amapManager"
      :vid="'amap-vue' + key"
      :zoom="zoom"
      :plugin="plugin"
      :center="center"
      :events="events"
    >

      <!-- 标记 -->
      <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
    </el-amap>
  </div>
</template>
 
<script>
/**
 * 高德地图选点组件
 *
 * @property {Array} value 地图坐标点
 * @property {Boolean} disabled 组件是否可用
 *
 * @event {Function()} change 点击确认或清除坐标点
 * @return {Object} location 经纬度 / address 位置
 *
 * @demo <by-amap-point-selector v-model="location" @change="changeLocation" />
 * */

import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'

import VueAMap from 'vue-amap'
import Vue from 'vue'

let amapManager = new AMapManager()
let defaultPoint = [116.39, 39.91]

export default {
  name: '    ',
  props: {
    mapInfo:{//护栏和地图的设备落点信息
      type:Array,
      default:()=>{
        return []
      }
    },
    // 初始化位置
    value: {
      type: Array,
      default: function () {
        return []
      },
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    // 初始化高德地图
    // @todo 秘钥目前暂时写死，后期考虑后台配置
    Vue.use(VueAMap)
    VueAMap.initAMapApiLoader({
      key: '6352529f04ed25df8f8e7ee26564d21d',
      plugin: [
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.PlaceSearch',
        'AMap.Geolocation',
        'AMap.Geocoder',
      ],
      v: '1.4.4',
      uiVersion: '1.0.11',
    })
  },
  data() {
    let _this = this

    // 高德地图事件处理
    const events = {
      // 地图初始化完毕
      init() {
        // lazyAMapApiLoaderInstance.load().then(() => {
        //   _this.initSearch()
        // })
      },
      // 地图点击
      click(e) {
        _this.markers = []
        let { lng, lat } = e.lnglat
        _this.lng = lng
        _this.lat = lat
        _this.center = [lng, lat]
        _this.markers.push([lng, lat])
      },
    }

    // 高德地图插件
    const plugin = [
      {
        // 定位
        pName: 'Geolocation',
        events: {
          init(o) {
            console.log('Geolocation:', o)

            //o是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                // 设置经度
                _this.lng = result.position.lng
                // 设置维度
                _this.lat = result.position.lat
                // 设置坐标
                _this.center = [_this.lng, _this.lat]
                _this.defaultCenter = _this.center
                _this.markers.push([_this.lng, _this.lat])
                // 获取地址
                // _this.getAddress(_this.lng, _this.lat).then((res) => {
                //   _this.address = _this.searchKey = res.formattedAddress
                //   console.log(_this.address)
                // })
              }
            })
          },
          // click(e) {
          // 	console.log(e);
          // }
        },
      },
      {
        // 工具栏
        pName: 'ToolBar',
        events: {
          // init(instance) {
          // 	console.log(instance);
          // }
        },
      },
      {
        // 搜索
        pName: 'PlaceSearch',
        events: {
          // init(instance) {
          // 	console.log(instance)
          // }
        },
      },
    ]

    return {
      path:[[116.39, 39.91, 116.37, 39.91],
        [116.380298, 39.907771, 116.38, 39.90],
        [116.385298, 39.907771, 116.40, 39.90]],
      key: +new Date(),
      isShowMap: false, // 展示选点弹窗
      address: null, // 地址
      searchKey: '', // 搜索
      markers: [defaultPoint], // 地图标点
      center: defaultPoint, // 当前坐标位置
      zoom: 12, // 最大缩放比例
      lng: 0, // 经度
      lat: 0, // 纬度
      amapManager, // 高德地图管理器
      events, // 高德地图事件处理
      plugin, // 高德地图插件
    }
  },
}
</script>
 
<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

p {
  margin: 0;
}

.m-b-10 {
  margin-bottom: 10px;
  width:auto;
}

.tip-box {
  width: 100%;
  max-height: 260px;
  position: absolute;
  top: 33px;
  overflow-y: auto;
  background-color: #fff;
  z-index: 999;
}

.selector-box {
  width: 300px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #d9d9d9;
  background-color: #fff;

  > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

.close-icon {
  color: rgba(0, 0, 0, 0.25);
}
</style>